出处：掘金

原作者：某某某人

帧动画

帧动画是一种通过连续展示一系列静态图像（帧）来模拟运动或变化的动画类型。这与传统电影的原理相似，即通过快速播放一连串的单独帧来创造视觉上的连续运动感

实现方案

• APNG、WebP、GIF：浏览器自动控制，通过在特定的时间间隔内连续展示不同的帧来实现动画效果
• 透明视频：视频本质上也是高帧率的帧动画。透明视频可以被看作是一种特殊的帧动画，用途通常更偏向于复杂的场景和动态背景
• 序列帧：由开发者主动控制，通过 JS 或 CSS 动态更改图像源来实现，跟随帧率不断的切换一个元素的 src 或背景图

开发成本

使用图片类资源，一般不需要开发，或者通过 CSS、JS 简单编码即可实现

动态交互性

在代码层面上，一般控制播放与暂停，实时的交互性较为有限

性能

CPU：

• 帧动画通常不太会对 CPU 产生高负荷，因为动画播放本身很少涉及计算密集型的任务
• 但是，如果有大量大图正在被解码或处理，或者动画和其他 DOM 元素有大量的交互，可能导致 CPU 负载增加

GPU：

• 在传统的 2D 帧动画中，GPU 主要处理图像的渲染。如果帧率高并且分辨率大，GPU 的负荷会显著提高。一旦超出了 GPU 的处理能力，就会出现掉帧的情况，影响流畅度

内存：

• 帧动画往往是内存使用的主要瓶颈。高质量的大图需要占用大量的内存空间以保存所有帧的数据。在内存受限的设备上，这可能导致页面崩溃或性能严重下降

FPS（帧率）：

• FPS 可能受到图像的大小、解码和渲染速度的限制。如果系统无法在每秒钟内按帧动画所需的帧率快速处理和显示所有的图像，那么动画的流畅度将受损，表现为卡顿或延迟

属性动画

属性动画一般是通过位移、旋转、缩放、斜切、透明度变化的简单动画，这类动画就不需要通过序列帧来实现，而是通过拆解整个动画为一个个单独的元素，每个元素再做单独的属性动画

实现方案

• CSS 动画：通过 @keyframe 定义动画序列，改变 CSS 属性值。相对于 JS，CSS 动画通常性能更好，因为它们能够利用够利用浏览器的优化, 例如运行在合成线程
• JS 动画库（如 gsap, tween.js, anime 等）：提供了高级的 API 来实现复杂的属性动画，可以控制更广泛的动画属性，提供更复杂的时间线控制等
• SVG 动画：SVG 允许通过 CSS 和 SMIL（同步多媒体集成语言）对 SVG 元素属性进行动画处理，例如路径点的移动或颜色的变化
• Lottie 动画：lottie 也可以以帧的形式播放动画，但是在多图的情况下往往内存占用较大不建议这样使用。更好的方式是通过 lottie 做属性变化来代替手动开发复杂的 CSS、JS，以此提高开发效率降低实现成本

开发成本

这类动画效果可以较为简单，也可以极其复杂，这个与开发难度和投入的时间强关联

动态交互性

可以很容易地通过事件和回调函数与用户互动，动态调整动画进程和属性

性能

CPU：

• 如果属性动画由 JS 控制且涉及大量的计算（例如复杂的数学运算或频繁的 DOM 操作），这可能会增加 CPU 的负担
• 当动画导致页面布局变更（Reflow）或视觉变更（Repaint）时，CPU 工作量增加，尤其是在移动设备或低性能设备上更为突出

GPU：

• 现代浏览器会尝试利用 GPU 硬件加速某些类型的动画，例如变换（transforms）和透明度（opacity）变化，这可以减少 CPU 负担，并提高动画流畅度
• 在强制硬件加速的属性（如使用 CSS 的 transform 和 opacity）上运用动画最小化 CPU 使用，并且可以提供更流畅的帧率。然而，过度依赖硬件加速也可能导致 GPU 的负载增加

内存：

• 动画本身对内存的直接影响通常比较有限，但如果动画涉及创建大量的 DOM 元素或图形资源，那么内存消耗会增加
• 持续的动画可能导致内存占用持续处于高水平，即使用户不再与该页面交互。页面依然不断的计算和重绘，这需要消耗一定的计算资源和内存，尤其是在使用 JS 实现的复杂或不断运行的动画情况下

FPS（帧率）：

• 能在硬件加速上运行的动画更有可能提供高帧率，特别是那些不频繁触发布局改变的动画
• 动画的复杂度（例如同时改变多个属性、动画的元素数量）都会影响帧率。如果浏览器或设备不能维持高帧率，用户可能会感知到卡顿或延迟

3D 动画

实现方案

• WebGL/WebGPU（如 three.js）：使用 WebGL/WebGPU 通过浏览器在 HTML5 Canvas 上渲染交互式 3D 图形
• 透明视频：透明视频通常是指包含 alpha 通道的视频文件，从而允许背后的图像或内容显示出来，这种透明视频可以被嵌入 Web 页面中，与页面背景或其他 HTML 内容结合，从而达到 3D 动画效果的展示目的

开发成本

3D 动画通常需要使用 WebGL 或基于 WebGL 的库（如 Three.js），这要求开发者对 3D 编程有较深的理解

动态交互性

可以实现高度的交互，但要同时处理 3D 模型、视图、光照等方面的变化，编码工作相对复杂

性能

高度依赖 GPU，对 CPU 影响相对较小（除了初始化和物理计算等方面）。内存消耗取决于场景复杂性。FPS 会受到硬件能力和场景优化程度的影响，对编码优化和资源管理的要求较高